<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>新增商品</title>
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="../script/vant/index.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../script/elEditor/css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/product_sort.css" />
    <link rel="stylesheet" type="text/css" href="css/product_add.css" />
    <style>
        html,
        body {
            background-color: #f3f3f3 !important;
        }

        .choosebox {
            width: 80px;
            height: auto;
            position: absolute;
            top: 40px;
            right: 10px;
            background: #fff;
            /* padding-top: 10px; */
            border-radius: 5px;
            box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 20%);
            z-index: 99999;

        }

        .topstyle {
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            border-bottom: dashed 0.5px #eee;
        }

        .fenlei_box {
            width: 90%;
            left: 5%;
            min-height: 300px;
            max-height: 430px;
            position: absolute;
            top: 10%;
            background: #fff;
            padding-top: 10px;
            border-radius: 10px;
            box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 20%);
            z-index: 99999;
        }

        .tree_all {
            width: 100%;
            overflow: hidden;
        }

        .van-picker-column__item{
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: start;
            padding: 0 4px;
            color: #000;
            width: 50%;
            margin-left: 42%;
        }

        .variant_pic{
            display: flex;
            justify-content: space-between;
        }
        .Eleditor-area {
            background: #fff !important;
            word-break: break-all;
        }

    </style>
</head>

<body>
    <!-- v-cloak -->
    <div id="app" v-cloak>
        <section class="bodymain">
            <!-- 商品基础信息 -->
            <div class="order_detail mt10">
                <div class="productlist_title">
                    基本信息
                </div>
                <div class="dcwj_con2" style="padding-top: 0px;">
                    <div class="dcwj_list bor_bottom">
                        <div class="fmly_lft color9 fl">商品分类</div>
                        <div class="dcwj_left fr" v-on:click="handOpenCategoryPop()">
                            <input class="fl" type="text" placeholder="请选择" style="width: 92%;" v-model="Category.current.Name"
                                readonly unselectable="on">
                            <i class="icon iconfont icon-gengduo fr"></i>
                        </div>
                    </div>
                    <div class="dcwj_list bor_bottom">
                        <div class="fmly_lft color9 fl">商品名称</div>
                        <div class="dcwj_left fr">
                            <input type="text" placeholder="请输入商品名称" v-model="form.ProductName">
                        </div>
                    </div>
                    <div class="dcwj_list bor_bottom">
                        <div class="fmly_lft color9 fl">排序</div>
                        <div class="dcwj_left fr">
                            <input type="text" placeholder="请输入排序" v-model="form.SortOrder">
                        </div>
                    </div>
                    <div class="dcwj_list">
                        <div class="fmly_lft color9 alline">商品简介</div>
                        <div class="dcwj_left alline pt6">
                            <textarea id="textarea" placeholder="请输入" v-model="form.Title"></textarea>
                        </div>
                    </div>
                    <div class="dcwj_list">
                        <div class="fmly_lft color9 alline">商品封面图<i
                                class="icon iconfont icon-bitianxiang- redcolor bitian"></i></div>
                        <div class="dcwj_left alline pt6">
                            <div class="imglist_box">
                                <div class="img_item_box">
                                    <div v-if="form.CoverImg!=''" class="imglist_item fl">
                                        <img v-on:click="do_openimages()" class="imgitem" v-bind:src="form.CoverImg" />
                                        <i v-on:click="remove_pic()" class="icon iconfont icon-shanchu onmouse_close"
                                            style="font-size:1rem;"></i>
                                    </div>
                                    <div class="imglist_item" v-else >
                                        <div class="img_smallbox">
                                            <i v-on:click="choose_picture(1)"
                                                class="icon iconfont icon-xinzeng textalign_c"
                                                style="font-size:1rem;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="dcwj_list">
                        <div class="fmly_lft color9 alline">商品相册<i
                                class="icon iconfont icon-bitianxiang- redcolor bitian"></i><span
                                class="maxnum">（最多支持9张）</span></div>
                        <div class="dcwj_left alline pt6">
                            <div class="imglist_box">
                                <div class="img_item_box">
                                    <div class="imglist_item fl" v-for="(item,index) in imglist">
                                        <img v-on:click="do_viewimages(index)" class="imgitem" v-bind:src="item.url" />
                                        <i v-on:click="remove_img(item.index)"
                                            class="icon iconfont icon-shanchu onmouse_close"
                                            style="font-size:1rem;"></i>
                                    </div>
                                    <div v-if="imglist.length<9" class="imglist_item">
                                        <div class="img_smallbox">
                                            <i v-on:click="choose_picture(9)"
                                                class="icon iconfont icon-xinzeng textalign_c"
                                                style="font-size:1rem;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
            <!-- 销售信息 -->
            <div class="order_detail mt10">
                <div class="productlist_title">
                    销售信息
                </div>
                <div class="dcwj_con2" style="padding-top: 0px;">
                    <div class="dcwj_list bor_bottom">
                        <div class="fmly_lft color9 fl">商品类型</div>
                        <div class="dcwj_left fr">
                            <label class="label-radio">
                                <input class="aui-radio" v-on:click="do_select_type(1)" v-bind:checked="form.Type==1"
                                    style="margin-right: 10px; position: relative; top:5px; width: 1rem; height: 1rem; border-radius: 20px;"
                                    type="radio" name="PlanType">单一
                            </label>
                            <label class="label-radio">
                                <input class="aui-radio" v-on:click="do_select_type(2)" v-bind:checked="form.Type==2"
                                    style="margin-right: 10px; width: 1rem; position: relative; top:5px; height: 1rem; border-radius: 20px;"
                                    type="radio" name="PlanType">多种
                            </label>
                        </div>
                    </div>
                    <div v-if="form.Type==1">
                        <div class="dcwj_list bor_bottom">
                            <div class="fmly_lft color9 fl">类型标题<i
                                    class="icon iconfont icon-bitianxiang- redcolor bitian"></i></div>
                            <div class="dcwj_left fr">
                                <input type="text" v-model="form.TypeTitle" readonly>
                            </div>
                        </div>
                        <div class="dcwj_list bor_bottom">
                            <div class="fmly_lft color9 fl">销售单价<i
                                    class="icon iconfont icon-bitianxiang- redcolor bitian"></i></div>
                            <div class="dcwj_left fr">
                                <input type="text" placeholder="请输入销售单价" v-model="form.VariantLists[0].SalePrice">
                            </div>
                        </div>
                        <div class="dcwj_list bor_bottom">
                            <div class="fmly_lft color9 fl">成本单价<i
                                    class="icon iconfont icon-bitianxiang- redcolor bitian"></i></div>
                            <div class="dcwj_left fr">
                                <input type="text" placeholder="请输入成本单价" v-model="form.VariantLists[0].VariantBasicPrice">
                            </div>
                        </div>
                        <div class="dcwj_list bor_bottom" style="position: relative; height: 2.4rem; overflow:unset;">
                            <div v-if="select_weight" class="choosebox showTopstyle">
                                <div class="topstyle" v-on:click="WeightTypeChange4Type1('g')">g</div>
                                <div class="topstyle" v-on:click="WeightTypeChange4Type1('kg')">kg</div>
                            </div>
                            <div class="fmly_lft color9 fl">重量<i
                                    class="icon iconfont icon-bitianxiang- redcolor bitian"></i></div>
                            <div class="dcwj_left fr">
                                <div class="fr" v-on:click="choose_weight()">
                                    <i class="icon iconfont icon-gengduo fr"></i>
                                    <span
                                        style="float: right; font-weight: 600; color: #333; margin: 0px 3px 0px 10px;" v-text="form.VariantLists[0].WeightType"></span>
                                </div>
                                <input type="text" placeholder="请输入重量" v-model="form.VariantLists[0].Weight" class="fr"
                                    style="width: 40%; height: 1.6rem; line-height: 1.6rem; border-radius: 5px; padding-right: 5px; border: solid 0.5px #eee;">
                            </div>
                        </div>
                        <div class="dcwj_list bor_bottom">
                            <div class="fmly_lft color9 fl">当前库存<i
                                    class="icon iconfont icon-bitianxiang- redcolor bitian"></i></div>
                            <div class="dcwj_left fr">
                                <input type="text" placeholder="请输入当前库存" v-model="form.VariantLists[0].Stock">
                            </div>
                        </div>
                        <div class="dcwj_list ">

                            <div class="fmly_lft color9 fl">安全库存</div>
                            <div class="dcwj_left fr">
                                <input type="text" placeholder="请输入安全库存" v-model="form.VariantLists[0].SafeStock">
                            </div>
                            <span class="timerdec" style="margin-top: 0px;">当前库存小于安全库存时，自动预警</span>
                        </div>
                    </div>
                    <div v-if="form.Type==2">
                        <div class="dcwj_list">
                            <div class="fmly_lft color9 fl">型号名称<i
                                    class="icon iconfont icon-bitianxiang- redcolor bitian"></i></div>
                            <div class="dcwj_left fr">
                                <input type="text" placeholder="示例：口味、颜色、规格" readonly>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 销售信息 -->
            <div v-if="form.Type==2" class="order_detail mt10" v-for="(item,index) in form.VariantLists">
                <div class="productlist_title">
                    销售信息{{ index + 1 }}
                    <span class="bluecolor" style="padding-left: 20px;" @click="handDelVariant(item.ID)" v-if="Number(index) !== 0">删除</span>
                    <span class="bluecolor" @click="handAddNewVariant">添加</span>
                </div>
                <div class="dcwj_con2" style="padding-top: 0px;">
                    <div class="dcwj_list">
                        <div class="fmly_lft color9 alline variant_pic">
                            <span class="color9">
                                商品封面图<i class="icon iconfont icon-bitianxiang- redcolor bitian"></i>
                            </span>
                            <van-radio-group @change="ImgPathTypeChange(index)" v-model="item.ImgPathType" direction="horizontal">
                                <van-radio name="1">
                                    <span style="color:#000;">手动上传 </span>
                                </van-radio>
                                <van-radio name="2">
                                    <span style="color:#000;">使用封面图
                                </van-radio>
                            </van-radio-group>
                        </div>
                        <div class="dcwj_left alline pt6" v-if="Number(item.ImgPathType) === 1">
                            <div class="imglist_box">
                                <div class="img_item_box">
                                    <div v-if="item.ImgPath!=''" class="imglist_item fl">
                                        <img v-on:click="do_openimages_v(baseUri + item.ImgPath)" class="imgitem" v-bind:src="baseUri + item.ImgPath" />
                                        <i v-on:click="remove_pic_v(item.ID)" class="icon iconfont icon-shanchu onmouse_close"
                                            style="font-size:1rem;"></i>
                                    </div>
                                    <div class="imglist_item" v-if="item.ImgPath == ''">
                                        <div class="img_smallbox">
                                            <i v-on:click="handUploadVariantPic(index)"
                                                class="icon iconfont icon-xinzeng textalign_c"
                                                style="font-size:1rem;"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="dcwj_list">
                        <div class="fmly_lft color9 fl">型号名称<i
                                class="icon iconfont icon-bitianxiang- redcolor bitian"></i>
                        </div>
                        <div class="dcwj_left fr">
                            <input type="text" placeholder="请输入" v-model="item.VariantName">
                        </div>
                    </div>
                    <div class="dcwj_list bor_bottom">
                        <div class="fmly_lft color9 fl">销售单价<i
                                class="icon iconfont icon-bitianxiang- redcolor bitian"></i>
                        </div>
                        <div class="dcwj_left fr">
                            <input type="text" placeholder="请输入" v-model="item.SalePrice">
                        </div>
                    </div>
                    <div class="dcwj_list bor_bottom">
                        <div class="fmly_lft color9 fl">成本单价<i
                                class="icon iconfont icon-bitianxiang- redcolor bitian"></i>
                        </div>
                        <div class="dcwj_left fr">
                            <input type="text" placeholder="请输入" v-model="item.VariantBasicPrice">
                        </div>
                    </div>
                    <div class="dcwj_list bor_bottom" style="position: relative; height: 2.4rem; overflow:unset;">
                        <div v-if="Number(VariantWeightCurrent) === Number(item.ID)" class="choosebox showTopstyle">
                            <div class="topstyle" v-on:click="handToggleVariantWeightType(index,'g')">g</div>
                            <div class="topstyle" v-on:click="handToggleVariantWeightType(index,'kg')">kg</div>
                        </div>
                        <div class="fmly_lft color9 fl">重量<i
                                class="icon iconfont icon-bitianxiang- redcolor bitian"></i></div>
                        <div class="dcwj_left fr">
                            <div class="fr" v-on:click="handOpenVariantWeightType(item.ID)">
                                <i class="icon iconfont icon-gengduo fr"></i>
                                <span
                                    style="float: right; font-weight: 600; color: #333; margin: 0px 3px 0px 10px;" v-text="item.WeightType"></span>
                            </div>
                            <input type="text" placeholder="请输入重量" class="fr"
                                style="width: 40%; height: 1.6rem; line-height: 1.6rem; border-radius: 5px; padding-right: 5px; border: solid 0.5px #eee;" v-model="item.Weight">
                        </div>
                    </div>
                    <div class="dcwj_list bor_bottom">
                        <div class="fmly_lft color9 fl">当前库存<i
                                class="icon iconfont icon-bitianxiang- redcolor bitian"></i>
                        </div>
                        <div class="dcwj_left fr">
                            <input type="text" placeholder="请输入" v-model="item.Stock">
                        </div>
                    </div>
                    <div class="dcwj_list ">
                        <div class="fmly_lft color9 fl">安全库存</div>
                        <div class="dcwj_left fr">
                            <input type="text" placeholder="请输入安全库存" v-model="item.SafeStock">
                        </div>
                        <span class="timerdec" style="margin-top: 0px;">当前库存小于安全库存时，自动预警</span>
                    </div>
                </div>
            </div>
            <!-- 商品详情 -->
            <div class="order_detail mt10">
                <div class="productlist_title">
                    商品详情
                </div>
                <div class="dcwj_con2" style="padding-top: 0px;">
                    <div id="contentEditor"></div>
                </div>
            </div>
        </section>
        <!-- 商品分类选择 -->
        <van-popup 
            v-model="Category.show"
            round
            position="bottom"
            safe-area-inset-bottom
            :close-on-click-overlay="false"
            >
            <van-picker
                value-key="showText"
                show-toolbar
                title="商品分类选择"
                :columns="Category.list"
                confirm-button-text="确认"
                cancel-button-text="取消"
                :loading="Category.loading"
                @confirm="handCategoryConfirm"
                @cancel="handCloseCategoryPop"
                />
        </van-popup>
        <div class="pagebtn">
            <div class="buttom longwidth" v-on:click="handConfirmAdd">保存</div>
        </div>
    </div>
</body>
<script type="text/javascript " src="../script/api.js "></script>
<script type="text/javascript " src="../script/vant/vue.js"></script>
<script type="text/javascript " src="../script/vant/vant.js"></script>
<script type="text/javascript " src="../script/elEditor/jquery.min.js"></script>
<script type="text/javascript " src="../script/elEditor/Eleditor.min.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<script type="text/javascript" src="../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../script/aui-scroll.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript " src="js/product_add.js"></script>
<script type="text/javascript" src="../script/aui-actionsheet.js"></script>

</html>